<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
			vue：
				(vuex2.0.0-3.0.0已知能用的)
				npm install --save vux
				//*****************************
				每个页面都要引入store.js,所有的修改都是围绕着store里面的state转的
				store.js里面
				const store = new Vuex.Store({
					state: {
					  count: 0
					},
					mutations: {
					  increment (state) {
						state.count++
					  }
					},
					actions: {
					  increment (context) {
						context.commit('increment')
					  }
					}
				})
				export default store;
				//----------------------------------------
				this.$store.state拿值
				this.$store.mutation['xxx']改state的值
				this.$store.dispatch('xxx'),action异步调用mutation里面的方法改state的值
				//----------------------------------------------------------------
				进阶用法：
				import {mapState,mapMutation,mapAction} from 'vux'
				
				4.0新增
				//new Vuex.Store改为了createStore
				getters: {
				    doneTodos (state) {
				      return state.todos.filter(todo => todo.done)
				    }
				}
				多数用来处理state并return出来
				this.$store.getters['xxx']改state的值
				
				
				
				
				
			react：
				//普通方式处理状态管理#####################################################################
				("react-redux": "^7.2.6",
				"redux": "^4.1.2",已知可用)#####################################################################
				 npm install --save redux
				 npm install --save react-redux
				 npm install --save-dev redux-devtools
				 // 中间件，作用：如果不使用该中间件，当我们dispatch一个action时，需要给dispatch函数传入action对象；但如果我们使用了这个中间件，那么就可以传入一个函数，这个函数接收两个参数:dispatch和getState。这个dispatch可以在将来的异步请求完成后使用，对于异步action很有用
				 npm install --save redux-thunk
				 redux只需要关注store文件夹中的配置对象：actions.js、reducers.js、store.js，然后入口index.js引入并创建实例
				 //********************************************
				 state===>暴露一些数据
				 reducer.js===>
					import { combineReducers } from 'redux'
					import state from '存数据的地方'		
					function 定义的方法(state = 上面定义的数据，拿下来用,action){
					    switch(action.type){
					        case '从action传进来的标识':
					            return state + action.data(action.data是接收组件调用该方法时传进来的参数)
					        default:
					            return state
					    }
					}
					
					export default combineReducers({
					    定义的方法,
					})
				 action.js===>
					import store from 'store实例的位置'
					设定一个触发机制的函数，传入data参数，然后返回一个带dispatch，getState参数的箭头函数，里面是查找标识的dispatch启动函数，例如：
						dispatch({ type: 'log', data: data })
						查找reducer文件里面哪个函数有这个标识，就运行该标识对应的逻辑
				 store.js===>
					import { applyMiddleware, createStore } from 'redux'
					import thunk from 'redux-thunk'
					import reducers from 'reducer。js的位置'
					let store = createStore(
					    reducers,
					    applyMiddleware(thunk)
					)
					export default store
				//----------------------------------
				index.js里面import { Provider  } from 'react-redux'和store实例的位置，React.StrictMode这个标签变为
				<Provider store={store}>
				    <App />
				  </Provider>
				store其实是一个数据对象;
				store.subscribe(() => {
					setTimeout(function(){
						console.log('状态管理的数据修改了')
					},0)
				})
				这个逻辑放在index.js里面，全局监听state变化；
				//--------------------------------------
				其他页面引入redux使用的时候，组件页面记得引入import { connect } from 'react-redux'和action对应的方法{方法或函数}
				组件页面把export default 最终展示的组件，变成
				export default connect((state) => {
					return {setLog_s:state['xxx']/*返回的全部方法，要用哪个就拿'xxx'出来赋给它，或者全部传进去，属性必须要对应reducers里面的方法名*/}
				},(dispatch, ownProps) => {//将dispatch映射到组件的props当中,页面调用比如this.props.setLog_a_fn(data)
					return {
						setLog_a_fn (data) {//自定义属性，然后方法传入data，去触发action的dispatch并获取之前state存在的和reducer里面有对应的方法，重点是触发action的dispatch，以便调用
							dispatch(action里面想调用的方法(data))
						},
					}
				})(最终展示的组件)
				//****************************************************
				流程（重点）：
					创建state初始数据，
					然后在reducer里面创建方法规则，
					然后action里面调用相应的规则，
					使用redux状态管理的时候还得要创建一个store实例，引到入口index.js里面去用
				
				
					
					
			小程序：
				直接处理app.js全局字段
	</body>
</html>
